<template>
  <!-- 专场 模板 -->
  <div>
    <div class="more-box" v-if="wideGoods.length">
      <div class="left">
        <img v-lazy="wideGoods[0].left.img" alt="" v-if="wideGoods[0].left.img">
        <div class="title_mark" :style="`background: #${bgColor};`">
          <div>{{wideGoods[0].left.titleName}}</div>
          <div :title="wideGoods[0].left.subtitleName">{{wideGoods[0].left.subtitleName}}</div>
        </div>
        <button @click="editItem('left')">编辑</button>
      </div>
      <div class="middle">
        <div class="m-item" v-for="(val, index) in wideGoods[1].middle.goodsList" :key="index">
          <img v-lazy="val.img" alt="" v-if="val.img">
          <button @click="editItem(`middle_${val.seq - 1}`)">编辑</button>
        </div>
      </div>
      <div class="right">
        <div class="r-item">
          <div class="r_title">
            <div :title="wideGoods[2].right.goodsList[0].titleName">{{wideGoods[2].right.goodsList[0].titleName}}</div>
            <div :style="`color: #${bgColor};`" :title="wideGoods[2].right.goodsList[0].desc">{{wideGoods[2].right.goodsList[0].desc}}</div>
          </div>
          <div class="r_img">
            <img v-lazy="wideGoods[2].right.goodsList[0].img" alt="" v-if="wideGoods[2].right.goodsList[0].img">
          </div>
          <button @click="editItem('right_0')">编辑</button>
        </div>
        <div class="r-item">
          <div class="r_title">
            <div :title="wideGoods[2].right.goodsList[1].titleName">{{wideGoods[2].right.goodsList[1].titleName}}</div>
            <div :style="`color: #${bgColor};`" :title="wideGoods[2].right.goodsList[1].desc">{{wideGoods[2].right.goodsList[1].desc}}</div>
          </div>
          <div class="r_img">
            <img v-lazy="wideGoods[2].right.goodsList[1].img" alt="" v-if="wideGoods[2].right.goodsList[1].img">
          </div>
          <button @click="editItem('right_1')">编辑</button>
        </div>
        <div class="r-item">
          <div class="r_title">
            <div :title="wideGoods[2].right.goodsList[2].titleName">{{wideGoods[2].right.goodsList[2].titleName}}</div>
            <div :style="`color: #${bgColor};`" :title="wideGoods[2].right.goodsList[2].desc">{{wideGoods[2].right.goodsList[2].desc}}</div>
          </div>
          <div class="r_img">
            <img v-lazy="wideGoods[2].right.goodsList[2].img" alt="" v-if="wideGoods[2].right.goodsList[2].img">
          </div>
          <button @click="editItem('right_2')">编辑</button>
        </div>
      </div>
    </div>

    <div class="more-box" v-else>
      <div class="left">
        <button @click="editItem('left')">编辑</button>
      </div>
      <div class="middle">
        <div class="m-item">
          <button @click="editItem('middle_0')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_1')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_2')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_3')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_4')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_5')">编辑</button>
        </div>
      </div>
      <div class="right">
        <div class="r-item">
          <button @click="editItem('right_0')">编辑</button>
        </div>
        <div class="r-item">
          <button @click="editItem('right_1')">编辑</button>
        </div>
        <div class="r-item">
          <button @click="editItem('right_2')">编辑</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    floorId: String,
    bgColor: String,
    wideGoods: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    editItem(position) {
      this.$emit('on-edit', this.floorId, 'special', position)
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../../scss/_var.scss';
.more-box {
  position: relative;
  .left, .right {
    width: 108px;
    height: 255px;
  }
  .title_mark {
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    color: #fff;
    & > div {
      font-weight: bold;
      line-height: 30px;
      overflow: hidden;
    }
  }
  .left {
    position: relative;
    background: $bg-gray;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    .r-item {
      width: 107px;
      height: 81px;
      margin-top: 6px;
      padding: 10px;
      background: $bg-gray;
      position: relative;
      &:first-child {
        margin-top: 0;
      }
      .r_title {
        float: left;
        width: 50px;
        font-size: 12px;
        & > div {
          height: 20px;
          line-height: 20px;
          overflow: hidden;
        }
      }
      .r_img {
        float: right;
        width: 35px;
        height: 60px;
      }
    }
  }
  .middle {
    width: 337px;
    position: absolute;
    top: 0;
    left: 116px;
    .m-item {
      background: $bg-gray;
      float: left;
      position: relative;
      width: 108px;
      height: 125px;
      margin-right: 5px;
      &:nth-of-type(3), &:nth-of-type(6) {
        margin-right: 0;
      }
      &:nth-of-type(4), &:nth-of-type(5), &:nth-of-type(6) {
        margin-top: 5px;
      }
    }
  }
}
button {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: $color-main;
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 12px;
}
</style>
